<template>
    <div>
        <el-input v-model="name"  @input="changeName" placeholder="请输入名称" />
        <el-table :data="data.tableData" style="width: 100%">
            <el-table-column type="index" width="50" />
            <el-table-column type="selection" width="55" />
            <!-- 常规列 -->
            <el-table-column v-for="col in columns" :label="col.label" :prop="col.prop" :key="col.label" />
            <!-- 申请状态 -->
            <el-table-column label="申请状态" width="180">
                <template #default="scope">
                    <el-tag type="success">{{ scope.row.name }}</el-tag>
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template #default="scope">
                    <el-button size="small" @click="handleEdit(scope.row)">编辑</el-button>
                    <el-button size="small" type="danger" @click="handleDelete(scope.row)">删除
                    </el-button>
                    <el-button size="small" type="success" @click="handleDelete(scope.row)">提交审核</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination :currentPage="pager.pageNo" :page-size="pager.pageSize"
            :page-sizes="[100, 200, 300, 400]" layout="total, sizes, prev, pager, next, jumper" :total="total"
            @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </div>
</template>


<script setup lang="ts">
import { reactive, ref,watchEffect } from "vue";
import { queryLoanList } from '@/api/loan'
const data = reactive({
    tableData: []
});
const pager = reactive({
    name: '',
    pageNo: 1,
    pageSize: 10
});
const name = ref('');
const total = ref(0);
const columns = [
    {
        label: "姓名",
        prop: "name",
    },
    {
        label: "出生日期",
        prop: "birthday",
    },
    {
        label: "性别",
        prop: "sex",
    },
    {
        label: "教育程度",
        prop: "education",
    },
    {
        label: "居住地址",
        prop: "address1"
    },
    {
        label: "手机号",
        prop: "mobile_phone",
    },
    {
        label: "申请状态",
        prop: "status",
    }]
// 方法
const debounce = function ( fn:any, delay:number) {
    let timer:any = null;
    return function () {
        clearTimeout(timer) // 每次调用debounce函数都会将前一次的timer清空，确保只执行一次
        timer = setTimeout(() => {
            fn(...arguments)
        }, delay)
    }
}
const handleEdit = (row: any) => { };
const handleDelete = (row: any) => { }
const changeName = debounce((name:string) => {
    pager.name = name; // 触发watchEffect
},1000)
function handleSizeChange(size:number){
    pager.pageSize = size;  // 改变页显示数
    pager.pageNo = 1;
    // init(); //存疑
}
function handleCurrentChange(page:number){
    pager.pageNo = page;
    // init();//存疑
}
const init = async () => {
    console.log('watchEffect执行了')
    const res = await queryLoanList(pager);
    // console.log("数据是:", res)
    data.tableData = res.data.data?.data?.data;
    total.value = res.data.data.rows;
}
// 最对多对象 多属性的改变, 发起请求, watch不合适 computed管显示

// 一开始会触发一次, 接着内部使用的响应式数据改变后触发 副作用
watchEffect(init)
// init();
</script>